<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head th:replace="fragment_base::head(~{::title})">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客-图库</title>
    <link rel="stylesheet"
          href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
    <link rel="stylesheet" href="../../static/css/common.css">
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
    <script src="../../static/js/custom.js"></script>
    <script src="../../static/js/semantic.min.js"></script>
</head>
<body>
<!--导航-->
<nav th:replace="admin/fragment_manager::menu(3)">
    class="ui inverted attached segment head-tab-padding">
    <div class="ui container">
        <!--stackable 表示可堆叠，自适应-->
        <div class="ui inverted secondary stackable menu">
            <h2 class="ui teal header item">管理后台</h2>
            <a class="active menu-item item mobile-hide" href="#"><i
                    class="teal code icon"></i>博客</a>
            <a class="menu-item item mobile-hide" href="#"><i class="teal idea icon"></i>分类</a>
            <a class="menu-item item mobile-hide" href="#"><i class="teal tags icon"></i>标签</a>
            <div class="right menu-item  mobile-hide menu">
                <div class="ui dropdown item">
                    <div class="text">
                        <img class="ui circular image"
                             src="http://xxstudy.cn/media/img/avatar_15.png"
                             style="vertical-align:middle">唐人
                    </div>
                    <i class="dropdown icon"></i>
                    <div class="menu">
                        <a href="#" class="item">注销</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--菜单按钮-->
    <a id="menu-toggle" class=" ui black icon button bar-position mobile-show" href="#">
        <i class="sidebar icon"></i>
    </a>
</nav>


<!--中间内容-->
<div class="center-padding">
    <div class="ui container">

        <div class="ui eight stackable special cards">
            <div th:each="img:${wallList}" class="card">
                <div class="blurring dimmable image">
                    <div class="ui dimmer">
                        <div class="content">
                            <a style="color: rgba(255, 255, 255, 0.9);" th:href="@{${img.url}}"
                               target="_blank" th:text="${img.name}"></a>
                        </div>
                    </div>
                    <a th:href="@{${img.url}}" target="_blank" href="#">
                        <img class="ui card" th:src="@{${img.url}}" alt="">
                    </a>
                </div>
            </div>
        </div>

    </div>
</div>
<script>
    $('.special.cards .image').dimmer({
        on: 'hover'
    });
</script>
</body>
</html>